<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DashBoard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="http://localhost:8000/static/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
<!-- Author: Dalia Hosny C5-07 -->
<!-- The following code validates the search engine fields (search by and textbox so as for the user not to enter empty fields-->
$(document).ready(function(){
$('#searchEngineForm').validate();
});
<!-- Author: Dalia Hosny C5-07 --> 
<!--The next code is a function that works when the search method is used, when the user types something in the third field this function calls the method autoCompleteSearch which in return retrieves data from the database and shows it in the form of real-time data in the box of the search box -->
$(document).ready(function(){
     $( "input#autocompleteSearch" ).autocomplete({
                            source: "{% url autoCompleteSearch %}",
                            minLength: 1,
                            autoFocus: true

        });
});
</script>
	
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
<ul class="nav">

          <a class="brand" href="/homePage/">Eventati</a>
          <li><a href ="/DashboardHome/">Home Page</a></li>      
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		<!-- Author: Amina Kadry This form is for logging the user out of his account -->
         <li><a href="/logout/" method="POST">Log out</a></li>
            </ul>
			
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>


    <div class="container">
	<!-- Author: Miran Shahin
		This block the label that display the user's first and last name in their dashboard
-->
    	<h1 > Welcome <font color = "BLUE">{{user.first_name}}&nbsp;{{user.last_name}}</font></h1>
    <br>
    <br>

<!-- Author: Dalia Hosny C5-07
this code displays the search engine form in the Dash board home -->
<div style="color:black" align="center"> 
<h2>Search your events here:</h2>
   <form id = "searchEngineForm" action="/searchEngine/" method="POST">
   {%csrf_token%}
    <select id = "drop-down-list" name="Categories" class="required">
    <option value="" selected="selected">Search by...</option>
      <option value="Name">Name</option>
      <option  value="Location">Location</option>
      <option  value="Tag">Tag</option>
      <option  value="Category">Category</option>
    </select>
    <input id = "autocompleteSearch" type="text" size="60" name="search" class="required" minlength="1">
    <input type="submit" value="Search now!" ><br>
    </form>
</div>

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h2>Recent Created Events </h2> 
		<ul>
<!-- Author: Miran Shahin
		This block contains a loop, that display all the user's created events
-->
	{%if createdEventsList%}
		<a href="/CreatedEvents/" onclick = "return popup(this)"> See all {{countCreatedEventsList}} Events</a>
		{%for created in createdEventsList|slice:":3"%}
			<a href = "/EventPage/{{created.id}}""><li>{{created.template.eventName}}</br>{{created.template.startDate}}</li></a>
		{% endfor%}
		</ul>
	{%else%}
				<h3>
				<font color = "BLUE">You haven't created any events yet!</font>
				</h3>
			{%endif%}

</ul>
<br>
		<h2> Upcoming Events </h2> 
<ul>
<!-- Author: Miran Shahin
		This block contains a loop, that display all the upcoming events the user will attend
-->
{%if attendingEventsList%}
		<a href ="/AttendingEvents/"> See all {{countAttendingEventsList}} Events</a>
		{% for list in attendingEventsList|slice:":3" %}
    		<a href = "/EventPage/{{list.id}}"><li>{{ list.template.eventName }}</li></a>
		{% endfor %}
{%else%}
				<h3>
				<font color = "BLUE">You are not attending any recent events!</font>
				</h3>
		{%endif%}

		</ul>
<br>
		<h2> Invited to Events </h2>
<ul>		
	{%if invitedEventsList%}
<!-- Author: Miran Shahin
		This block contains a loop, that display all the events the user is invited to
-->
		<a href ="/InvitedEvents/"> See all {{countInvitedEventsList}} Events</a>
		{% for event in invitedEventsList|slice:":3" %}
    		<a href = "/EventPage/{{event.id}}"><li>{{ event.template.eventName }}</li></a>
		{% endfor %}
	{%else%}
				<h3><font color = "BLUE">You are not invited to any recent events!</font></h3>
			{%endif%}
		</ul>
<br>
		<h2> Moderated Events </h2>
<ul> 
	{%if moderatedEventsList%}
<!--- Author: Miran Shahin
		This block contains a loop, that display all the moderated events the user moderates
--->
		<a href ="/ModeratedEvents/">See all {{countModeratedEventsList}} Events </a>
		{% for list in moderatedEventsList|slice:":3" %}
    		<a href = "/EventPage/{{list.id}}"><li>{{ list.template.eventName }}</li></a>
		{% endfor %}
	{%else%}
				<h3><font color = "BLUE">You are not moderating any recent events!</font></h3>
			{%endif%}

		</ul>
<br>
				 <!--  Author : Fouad Hesham Said This function is used to show the bookmarked events by the user in a list form-->

		<h2> Bookmarks </h2>
<ul>
		{%if bookmarkList%}
			<a href ="/BookmarkedEvents/">See all {{countBookmarkedEventsList}} Events </a>
			{%if bookmarkEventsList %}
				{%for list in bookmarkEventsList %}
					<a href="/EventPage/{{list.id}}"><li>{{list.template.eventName}}</li></a>
				{%endfor%}
			{%endif%}	
		{%else%}
		<h3><font color = "BLUE">You don't have any bookmarked events</h3></font>
		{%endif%}
		</ul>
		 

<form action="/bookmark/" method = "POST">
	<br><input type="submit" value="Add Bookmarks"><br>	
	</form>
	
<br>
<!--  Author : Fouad Hesham Said This function is for redirecting the user to the list of pending events -->
{% if flagSystemModerator %}
<form action = "/pendingEvent/" method = "POST">
		<button type="submit" value="submit">View Pending Events</button>
		</form>
{% endif %}
<!--- Author: Mayada Al-Sawah
          This form conatins create a new event button.
          --->
	<form action="/viewTemplates/" method="POST">
     <br><input type="submit" value="Create new event" ><br>
 </form>

      </div>

      
      <hr>

      <footer>
		   <a href="/AboutUs/">About Us</a>
		<a href="/ViewInstructions/">Instructions</a>
		<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
		<a href  ="/News/">  Latest News and Updates</a>
		<a href ="/Faqs/"> FAQS</a>
		<a href ="/Contactus/"> Contactus</a>
		<p class="pull-right"><a href="#">Back to top</a></p>

		        <p>&copy; Company 2012</p>      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>
